import Taro, {Component} from '@tarojs/taro'
import {View, CoverView, CoverImage, Button} from '@tarojs/components'
import './index.scss'
import {getWindowHeight} from '../../utils/style'

import {connect} from '@tarojs/redux'
import * as productActions from '../../actions/product'
import Navbar from "../../components/Navbar";

let videoObj = {}

@connect(state => ({...state.product}), {...productActions})
class MyVideo extends Component {

  state = {
    showBack: false, // 是否展示返回按钮
    isLoading: true, // 是否加载中,供暂无数据出来
    playState: true // 暂停的开关
  }


  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: '',
    navigationStyle: "custom",
    usingComponents: {
      'i-spin': '../../wxComponents/spin/index', // 书写第三方组件的相对路径
    },
    "disableScroll": true
  }

  componentDidShow() {
    this.getData() // 获取视频接
  }


  render() {
    const {playState, isLoading} = this.state
    const {productInfo} = this.props
    const height = getWindowHeight(false) + 'px'
    return (
      <View>
        {
          isLoading && <i-spin fix></i-spin>
        }
        <Navbar type="icon" fixed={true} isCoverView={true}>

        </Navbar>
        <View className="video-contain" style={{height}}>
          <CoverView className="touch-cover" onClick={this.changeStatus.bind(this)}>
          </CoverView>
          <Video
            className="video"
            src={productInfo.video.url}
            showPlayBtn={false}
            showFullscreenBtn={false}
            showCenterPlayBtn={false}
            showProgress={true}
            objectFit="contain" controls={false}
            loop={false} id={'video' + productInfo.id}
            custom-cache={false} dataId={'video' + productInfo.id}>

          </Video>
          {/* swiperCurrent */}
          {/* <Swiper vertical="true" skip-hidden-item-layout={true}  loop={true} current={0}
                  circular={true}> */}
          {/* {
                      list.map(item=>(
                        <SwiperItem key={item.id}>
                          <Video
                          src={item.video.url}
                          showPlayBtn={false}
                          showFullscreenBtn={false}
                          showCenterPlayBtn={false}
                          showProgress={true}
                          objectFit="contain" controls={false}
                          loop={false} id={'video'+item.id}
                          custom-cache={false} dataId={'video'+item.id}></Video>
                        </SwiperItem>
                      ))
                    } */}
          {/* <SwiperItem key={productInfo.id}>
                          <Video
                          src={productInfo.video.url}
                          showPlayBtn={false}
                          showFullscreenBtn={false}
                          showCenterPlayBtn={false}
                          showProgress={true}
                          objectFit="contain" controls={false}
                          loop={false} id={'video'+productInfo.id}
                          custom-cache={false} dataId={'video'+productInfo.id}></Video>
                        </SwiperItem>
            </Swiper> */}
          {/* <Video
              src={productInfo.video.url}
              showPlayBtn={false}
              showFullscreenBtn={false}
              showCenterPlayBtn={false}
              showProgress={true}
              objectFit="contain" controls={false}
              loop={false} id={'video'+productInfo.id}
              custom-cache={false} dataId={'video'+productInfo.id}>

            </Video> */}
          {/* <CoverView class="tools">
                <cover-image src="https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png" class="home-icon right-icon" onClick={this.goList.bind(this)}></cover-image>
                <Button open-type="share" class="share-button">
                    <CoverImage class="share-icon right-icon" src="https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963641_Fkf2m79fFb.png"></CoverImage>
                </Button>
            </CoverView> */}
          {
            !playState &&
            <CoverImage className="play-btn" onClick={this.changeStatus.bind(this)}
                        src="https://img.kemanyun.com/qianhuituan/2019-10-11/69_1570790815_yUO3cyjQTB.png"></CoverImage>
          }
          {
            !isLoading && <CoverView className="video-goods" onClick={this.goDeatil.bind(this)}>
              <CoverImage src={productInfo.bannerImage.url} className="goods-image"></CoverImage>
              <CoverView className="goods-right">
                <CoverView className="goods-title">{productInfo.name}</CoverView>
                <CoverView className="goods-desc">{productInfo.summary}</CoverView>
                {/* <CoverView class="goods-price"> */}
                {/* <CoverView class="price"> */}
                {/* <CoverView class="market-price" style='width:100%'>
                    <CoverView class="market-box">
                      ¥365<CoverView class="hidden-box">一</CoverView>
                      <CoverView class="line"></CoverView>
                    </CoverView>
                    </CoverView> */}
                {/* </CoverView> */}
                {/* <CoverView class="goBuy">前往查看</CoverView> */}
                {/* </CoverView> */}
              </CoverView>
            </CoverView>
          }

        </View>
      </View>
    )
  }

  componentWillMount() {
    // const {swiperCurrent} = this.$router.params
    // this.setState({
    //   swiperCurrent
    // })
    // Taro.setNavigationBarTitle({
    //   title: name
    // });
  }

  componentDidMount() {
    this.setState({
      isLoading: false
    })
  }


  componentDidHide() {
  }

  componentCatchError() {
  }

  // 重置
  selfReset() {
    this.setState({
      playState: true,
    })
  }

  getData() {
    // Taro.showLoading({
    //   title: '加载中'
    // })
    this.setState({
      playState: false
    })
    // const {productInfo} = this.props
    // videoObj = Taro.createVideoContext('video' + productInfo.id)
    // videoObj.play()
    this.addBrowse()
  }

  // 点击暂停
  changeStatus() {
    let playState = !this.state.playState
    const {productInfo} = this.props
    if (playState) {
      videoObj = Taro.createVideoContext('video' + productInfo.id)
      videoObj.play()
    } else {
      Taro.createVideoContext('video' + productInfo.id).pause()
    }
    this.setState({
      playState
    })
  }

  // 浏览量
  addBrowse() {
    // Taro.request('post', 获取浏览量的接口)
  }

  // 跳转视频列表页面
  goList() {
    Taro.navigateTo({
      url: '../list/list',
    })
  }

  // 商品分享
  // onShareAppMessage() {

  // }
  // 立即购买
  goDeatil() {
    // const {productInfo} = this.props
    // Taro.navigateTo({
    //   url: `/pages/detail/index?id=${productInfo.id}`
    // })
  }

  // 返回
  goback() {

  }


}

export default MyVideo
